<template>
  <div class="box">
    <Dropdown placement="topRight">
      <div class="profile">
        <img class="profile-avatar" :src="user.avatar" v-if="user.avatar" />
        <img class="profile-avatar" src="@/assets/logo.png" v-else />
      </div>
      <template #overlay><div class="logout-btn" @click="logout">退出</div></template>
    </Dropdown>

    <div class="search-box">
      <input class="input" v-model="title" />
      <button
        class="btn"
        @click="addSession"
        :class="{ 'btn-act': title.length > 5 }"
        @keyup.enter="addSession"
      >
        开启一个话题
      </button>
    </div>
    <div class="history-box">
      <div class="history-box-title">
        <div>历史对话，由于资源有限，每个用户最多开启5个话题</div>
      </div>
      <div class="history-box-item" v-for="item in list" :key="item.id">
        <div @click="toChat(item.id)">{{ item.title }}</div>
        <div class="history-box-item-del" @click="delSession(item.id)">X</div>
      </div>
      <div class="empty" v-if="list.length === 0">空空如也</div>
    </div>
    <!-- <Button @click="sho">xx</Button> -->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { userInfo } from "@/api/user";
import { onMounted, ref } from "vue";
import { listByUserId, add, del } from "@/api/ai";
import { useAppStore, UserType } from "@/store/modules/app";
import { Modal } from "ant-design-vue";
import { message, Dropdown } from "ant-design-vue";

// import { message, Button } from "ant-design-vue";

// const sho = () => {
//   message.info("xxxx");
// };

const appStore = useAppStore();

const route = useRouter();

const toChat = (id: string, title?: string) => {
  route.push({
    path: "/chat",
    query: {
      sessionId: id,
      title: title,
    },
  });
};

const user = ref<any>({});
const list = ref<any>([]);
// const hasToken = ref(false);
onMounted(() => {
  userInfo().then((res) => {
    user.value = res;
    // eslint-disable-next-line prettier/prettier
    appStore.updateUser((res as unknown) as UserType);
  });
  listByUserId().then((res) => (list.value = res));
});

const title = ref<string>("");
const addSession = () => {
  if (!title.value || title.value.length < 6) {
    message.error("最少也要6个字符");
    return false;
  }

  if (list.value.length >= 5) {
    alert("已经达到最大限制");
    return false;
  }

  add({ title: title.value }).then((res) => {
    toChat(res, title.value);
  });
};

const delSession = (id: string) => {
  Modal.confirm({
    title: "真的要删除吗？",
    onOk() {
      del(id).then(() => {
        listByUserId().then((res) => (list.value = res));
      });
    },
  });
};

const logout = () => {
  appStore.clearData();
  route.push("/login");
};
</script>

<style lang="less" scoped>
.profile {
  position: fixed;
  top: 20px;
  right: 40px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

body {
  background-color: #efede6;
}
.box {
  margin: 0 auto;
  width: 800px;
  height: auto;
  padding: 100px 0 0 0;
}
.input {
  width: 100%;
  height: 50px;
  border-radius: 20px;
  border: 1px solid #ccc;
  padding-left: 50px;
  font-size: 18px;
}
.btn {
  position: relative;
  right: 0;
  /* float: left; */
  /* display: inline-block; */
  left: 691px;
  border: 1xp solid #ccc;
  padding: 6px 20px 6px 20px;
  border-radius: 12px;
  border: none;
  top: -41px;
  &:hover {
    background: #5645a1;
    color: #fff;
  }
}

.btn-act {
  background: #5645a1;
  color: #fff;
}

.history-box {
  margin-top: 50px;
}

.history-box-title {
  // padding-left: 50px;
  opacity: 0.3;
  margin-bottom: 20px;
  font-size: 14px;
}

.history-box-item {
  background: #e5ddc3;
  width: 100%;
  height: 50px;
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 18px;
  padding-left: 50px;
  line-height: 50px;
  margin-top: 10px;
  &:hover {
    background: #5645a1;
    color: #fff;
    div {
      display: block;
    }
  }
}

.history-box-item-del {
  position: relative;
  width: 30px;
  height: 30px;
  line-height: 30px;
  float: right;
  color: #fff;
  top: -40px;
  right: 20px;
  cursor: default;
  display: none;
  &:hover {
    font-size: 24px;
  }
}
.empty {
  margin: 0 auto;
  width: 800px;
  text-align: center;
  font-size: 42px;
  position: relative;
  /* margin-top: 20px; */
  top: 51px;
}
.logout-btn {
  color: red;
  cursor: default;
}
</style>
